import { View } from '@tarojs/components'
import s from './index.module.scss'
import classNames from 'classnames'
import { useState } from 'react'
import ListRow from 'components/ListRow'

import Blur from 'pages/highQuality/filter/01_blur/index'
import Fusion from 'pages/highQuality/filter/02_fusion'
import Merge from 'pages/highQuality/filter/03_merge'
import Tab from 'pages/highQuality/filter/04_tab'
import Letter from 'pages/highQuality/filter/05_letter'
import Icon from 'components/Icon'


const filter = [
  {
    key: 'pages/xxx/index',
    component: Blur,
    title: '模糊图片'
  }, {
    key: 'pages/xxx/index',
    component: Fusion,
    title: '融合'
  }, {
    key: 'pages/xxx/index',
    component: Merge,
    title: '合并'
  }, {
    key: 'pages/xxx/index',
    component: Tab,
    title: 'tab栏切换'
  }, {
    key: 'pages/xxx/index',
    component: Letter,
    title: '文字炫酷效果'
  }
]
interface filterProps {
  back: any,
  config: any
}
export default function Index(props: filterProps) {
  const [active, setActive] = useState(true)
  const [active_1, setActive_1] = useState(true)
  const [active_2, setActive_2] = useState(false)
  const [active_3, setActive_3] = useState(false)
  const [show, setShow] = useState(false)
  const [childPage, setChildPage] = useState(false)
  const [more, setMore] = useState(false)
  const [current, setCurrent] = useState<number>(-1)




  const __filter = classNames(s.page_filter, {
    [s.show]: active
  })
  const __next = classNames(s.page_1, {
    [s.show]: show,
    [s.exit]: childPage
  })
  const __page_2 = classNames(s.page_2, {
    [s.show]: childPage,
    [s.exit]: more
  })
  const __page_3 = classNames(s.page_3, {
    [s.show]: more
  })

  function selected(index) {
    setCurrent(index)
  }
  function return_btn() {
    if(current >= 0) {
      if(!active_3){
        setActive_1(true)
        setTimeout(() => {
          setShow(true)
          setChildPage(false)
        }, 16.7)
      } else if(active_3) {
        setChildPage(true)
        setMore(false)
      }
    } else if(!active) {
      setActive(true)
    }
  }
  function page_1_end() {
    if (childPage) {
      setActive_1(false)
    }
  }
  function page_2_end() {
    if (show) {
      setActive_2(false)
      setCurrent(-1)
    }
  }
  function page_3_end() {
    if (!more) {
      setActive_3(false)
    }
  }
  return (
    <View className={s.wrapper}>
        <View className={active ? __filter : `${s.page_filter} ${s.exit}`}>
          <View className={s.navigation_bar}>
            <View className={s.return_btn} onClick={() => { props.back() }}>
              <Icon name='chevron-up' size={30} style={{ transform: `rotate(${-90}deg)` }} />
            </View>
            <View className={s.nabigation_title}>{props.config.title || ''}</View>
          </View>
          <View className={s.filter_btn}
            onClick={() => {
              setActive(false)
              setShow(true)
            }}
          >滤镜</View>
          </View>
            {active_1 && (
          <View className={active ? `${s.page_1}` : __next} onTransitionEnd={() => page_1_end()}>
            <View className={s.navigation_bar}>
              <View className={s.return} onClick={return_btn}>
                <Icon name='chevron-up' size={30} style={{ transform: `rotate(${-90}deg)` }} />
              </View>
              <View className={s.nabigation_title}>背景动画</View>
            </View>
            {filter.map((item, index) => (
              <View className={s.btn}
                onClick={() => {
                  selected(index)
                  setActive_2(true)
                  setTimeout(() => {
                    setShow(false)
                    setChildPage(true)
                  }, 16.7)
                }}
              >
                <ListRow title={item.title} />
              </View>
            ))}
          </View>

            )}
            

          {active_2 && (
            <View className={show ? s.page_2 : __page_2} onTransitionEnd={() => page_2_end()}>
            <View className={s.navigation_bar}>
              <View className={s.return} onClick={return_btn}>
                <Icon name='chevron-up' size={30} style={{ transform: `rotate(${-90}deg)` }} />
              </View>
              <View className={s.nabigation_title}>背景动画</View>
            </View>
              {filter.map((item, index) => (
                <View>
                  {current == index ? (
                    <View>
                      <item.component />
                      <View className={s.btn}
                        onClick={() => {
                          setActive_3(true)
                          setTimeout(() => {
                            setChildPage(false)
                            setMore(true)
                          }, 16.7)
                        }}
                      >
                        <ListRow title='更多' />
                      </View>
                    </View>
                  ) : null}
                </View>
              ))}
            </View>
          )}

          {active_3 && (
            <View className={childPage ? `${s.page_3} ${s.exit}` : __page_3} onTransitionEnd={() => page_3_end()}>
            <View className={s.navigation_bar}>
              <View className={s.return} onClick={return_btn}>
                <Icon name='chevron-up' size={30} style={{ transform: `rotate(${-90}deg)` }} />
              </View>
              <View className={s.nabigation_title}>背景动画</View>
            </View>
              <View>实现思路</View>
            </View>
          )}
    </View>
  )
}